<template>
  <div>
    <van-tabs :v-model:active="active">
      <van-tab title="上升榜">
        <ul class="list">
          <li v-for="(item, index) in beautylist" :key="index">
            <!-- 图片和介绍 -->
            <div class="top">
              <img :src="item.imgurl" alt="" />
              <!-- 介绍 -->
              <div class="word">
                <p class="title">{{ item.title }}</p>
                <p class="Englishname">{{ item.Englishname }}</p>
                <!-- 评分 -->
                <p class="score">
                  {{ item.score }}
                  <span class="stars">{{ item.stars }}</span>
                  <span class="evaluate"
                    >&nbsp;&nbsp;({{ item.evaluate }})</span
                  >
                </p>
                <!-- 产地 -->
                <p class="country">
                  {{ item.country }}
                  <span class="Price">{{ item.Price }}/</span>
                  <span class="capacity">&nbsp;&nbsp;{{ item.capacity }}</span>
                </p>
              </div>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="卸妆">卸妆</van-tab>
      <van-tab title="妆前">妆前</van-tab>
      <van-tab title="粉底">粉底</van-tab>
      <van-tab title="隔离">隔离</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getBeautylDataApi } from "@/utils/api.js";
import { Tab, Tabs } from "vant";
import { ref } from "vue";
import "vant/es/tab/style";
import "vant/es/tabs/style";
export default {
  setup() {
    const active = ref(1);
    return { active };
  },
  data() {
    return {
      beautylist: [],
    };
  },
  components: { VanTab: Tab, VanTabs: Tabs },

  computed: {},

  mounted() {
    this.getbeautylist();
  },

  methods: {
    async getbeautylist() {
      const res = await getBeautylDataApi();
      if (res.status === 0) {
        console.log(res);
        this.beautylist = res.result;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";

:deep(.van-tab__text--ellipsis) {
  height: 3px;
  font-size: 28px;
  .font_f_w ();
  padding-bottom: 10px;
  overflow: visible;
  justify-content: center;
  display: inline-block;
  color: #999;
}
:deep(.van-tabs__wrap) {
  height: 90px;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 10px;
  width: 100%;
  position: fixed;
  top: 130px;
  z-index: 999;
  background: white;
}

//产品数据
.list {
  width: 100%;
  height: 1250px;
  position: absolute;
  top: 220px;
  li {
    height: 224px;
    padding: 29px 39px 25px 0;
    margin-left: 32px;
    .border-bottom();
    p {
      height: 40px;
      line-height: 40px;
    }

    //图片和介绍
    .top {
      .between ();
      margin-bottom: 16px;
      img {
        width: 160px;
        height: 160px;
        border-radius: 8px;
      }
      .word {
        width: 480px;
        .font_f_w ();
        font-size: 30px;
        color: #333333;

        .Englishname {
          font-size: 20px;
          color: #999999;
        }

        //评分
        .score {
          font-size: 26px;
          color: #68dcdc;
          height: 45px;
          line-height: 45px;
          .stars {
            height: 22px;
          }
          .evaluate {
            font-size: 24px;
            font-family: SimSun;
            font-weight: bold;
            color: #666666;
          }
        }
        //产地
        .country {
          font-size: 20px;
          .font_f_w ();
          color: #999999;
        }
      }
    }
  }
}
</style>
